<template>
  <!--修改部门信息-->
  <nf-form
    v-form-drag="formMeta"
    :model="model"
    :partModel="model2"
    v-bind="formMeta"
  ></nf-form>
</template>

<script lang="ts">
  import { defineComponent, reactive, watch } from 'vue'
  import { getOrganizationState } from '../state/state-organization'
  import formMeta from '../json/org-form.json'

  export default defineComponent({
    name: 'nf-org-form',
    props: {
    },
    setup(props, context) {
      const state = getOrganizationState()
      
      const model = reactive({})
      const model2 = reactive({})

      // 监听当前的部门ID，更新表单
      watch(() => state.currentOrg.id, (id) => {
        Object.assign(model, state.orgObject[id])
      }, {immediate: true})

      watch(() => model.deptName, (name) => {
        state.orgObject[state.currentOrg.id].deptName = name
        state.currentOrg.info.label = name
      })

      return {
        state,
        model,
        model2,
        formMeta
      }
    }
  })
</script>